<template>
  <div class="webchatConfig">
    <el-form class="m7-form busConfigForm"
      size="mini" :model="busConfigForm" label-position="top">
      <el-form-item label="自动接单下限（最小）" prop="autoAssignMin">
        <m7Select
          size="mini"
          filterable
          :options="minNumber"
          :defaultProps="{value: 'value', label: 'label'}"
          v-model="busConfigForm.autoAssignMin"
          @change="minChange"
          placeholder="请选择">
        </m7Select>
      </el-form-item>
      <el-form-item label="自动接单上限（最大）" prop="autoAssignMax">
        <m7Select
          size="mini"
          filterable
          :options="maxNumber"
          :defaultProps="{value: 'value', label: 'label'}"
          v-model="busConfigForm.autoAssignMax"
          placeholder="请选择">
        </m7Select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'webchatConfig'
})
export default class WebchatConfig extends Vue {
  public busConfigForm: any = {
    autoAssignMin: 1, // 下限
    autoAssignMax: 10
  }

  private maxNumber: any = []

  private minNumber = []

  private forNumber (num, obj, targetNum) {
    for (let i = targetNum; i < num + 1; i++) {
      obj.push({
        label: i,
        value: i
      })
    }
    return obj
  }

  private minChange () {
    this.maxNumber = this.forNumber(99, [], this.busConfigForm.autoAssignMin)
  }

  public setBusinessData (obj?: any) {
    if (obj && obj.agentId) {
      const { autoAssignMin, autoAssignMax, agentId } = obj
      this.busConfigForm = { autoAssignMin, autoAssignMax, agentId }
    } else {
      this.busConfigForm = {
        autoAssignMin: 1,
        autoAssignMax: 10
      }
    }
  }

  private mounted () {
    this.forNumber(99, this.maxNumber, 1)
    this.forNumber(99, this.minNumber, 1)
  }
}
</script>
<style lang="stylus" scoped>
</style>
